import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { FormattedMessage } from 'react-intl'
import { InputItem, NoticeBar ,Icon} from 'antd-mobile'
import { ChangeTitleHeader } from 'component/header'
import { FooterBar } from 'component/footer'
import { TopNavBar } from 'component/common'
import { SelectGoods, ChoseButton, MarketList, GuadanList,NewGuadanTwoWay, NewGuadanWay, MainAndSubsidiaryList } from 'component/position'
import { TopAccount, Data ,TradeMarket, TradeGuadan, ChartSimpleWrap} from './'
import { PriceAction } from '../../actions'
import { PriceStore } from '../../stores'
import { helper } from 'component/utils'


class NewMarketOrder extends Component {
  constructor(props) {
    super(props)
    let now = `${props.location ? props.location.query ? props.location.query.ccyPair ? props.location.query.ccyPair : 'EUR/JPY':'EUR/JPY':'EUR/JPY'}`;
    this.state = {
      active: 1,
      present: now, 
      length: 4,
      number : 40
    }
    this.onClick = this.onClick.bind(this)
  }
 onClick(i) {
    this.setState({
      active : i
    })
  }
  onSelected = (ccy) => {
    console.log(ccy, '000')
    let length = 6
    if (ccy.includes('JPY')) {
      length = 4
    }
    this.setState({
      present: ccy,
      length: length
    }, () => {
      PriceAction.clearTimeout()
      PriceAction.changePrice(ccy, helper.accMul(this.state.number, 1000))
    })
  }
  numValue = (val) => {
    this.setState({
      number: val
    })
  }
  render() {
    return (
      <div>
        <ChangeTitleHeader
          data={JSON.parse(localStorage.ccy)}
          present={this.state.present}
          topSelected={this.onSelected}
        />
        <TopAccount/>
        <TopNavBar
          onClick={(i) => {
            this.onClick(i)
            }
          }
          oneformat={
            <FormattedMessage id="marketList"/>
          }
          threeNode={{
            topIcon: <Icon type={require('static/svg/m1_1.svg')} />,
            topIconactive: <Icon type={require('static/svg/icon_57.svg')} />,
            name: "图表"
          }}
          fourNode={{
            topIcon: <Icon type={require('static/svg/m1-2.svg')} />,
            topIconactive: <Icon type={require('static/svg/icon_58.svg')} />,
            name: "数据"
          }}
        />
        <div className="cm-scrollable-container -background">
          {
            this.state.active == 1 ?
            <TradeMarket
              data={JSON.parse(localStorage.ccy)}
              present={this.state.present}
              topSelected={this.onSelected}
              length={this.state.length}
              number={this.numValue}
            /> :( this.state.active == 2 ?
            <TradeGuadan
              data={JSON.parse(localStorage.ccy)}
              present={this.state.present}
              topSelected={this.onSelected}
              number={this.numValue}
            /> : ( this.state.active == 3 ? <ChartSimpleWrap/> : <Data present={this.state.present}/>))
          }
        </div>
        <FooterBar activeIndex={0}/>
      </div>
    )
  }
}

export default NewMarketOrder

{/*
  <TradeMarket/>  市场单
  <TradeGuadan/> 挂单
  <ChartSimpleWrap/>  图表
  <Data/>  数据
  <NewGuadanWay/> 新建挂单   单向
  <NewGuadanTwoWay/>  新建挂单   双向
  <MainAndSubsidiaryList/>  新建挂单  主副单
*/}
